<template>
	<el-row>
		<el-col :span="24">
			<el-card>
				<template #header>
				  <div class="card-header">
					<span>歌曲分析</span>
				  </div>
				</template>
				<el-descriptions 
					direction="vertical" 
					column="5"
				>
					<el-descriptions-item align="center" 
						label="曲库总数" 
						label-class-name="my-label" 
						class-name="my-content"
					>
						{{total}}
					</el-descriptions-item>
					<el-descriptions-item label="热门数" align="center">{{musicrm}}</el-descriptions-item>
					<el-descriptions-item label="今年发帖数" align="center">{{releaseThisYear}}</el-descriptions-item>
					<el-descriptions-item label="去年发帖数" align="center">{{releaseLastYear}}</el-descriptions-item>
					<el-descriptions-item label="网站热度" align="center">{{webMusicHeat}}</el-descriptions-item>
				</el-descriptions>
			</el-card>
		</el-col>
	</el-row>
	<el-row :gutter="10">
		<el-col :span="12">
			<el-card>
				<template #header>
				  <div class="card-header">
					<span>类别分析</span>
				  </div>
				</template>
				<div id="MusicTypeCharts" style="height: 300px;"></div>
			</el-card>
		</el-col>
		<el-col :span="12">
			<el-card>
				<template #header>
				  <div class="card-header">
					<span>热门比例分析</span>
				  </div>
				</template>
				<div id="MusicRmCharts" style="height: 300px;"></div>
			</el-card>
		</el-col>
	</el-row>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import axios from 'axios';
import { ref } from 'vue';
 let total=ref(null);
 let musicrm=ref(null);
 let releaseThisYear=ref(null);
 let webMusicHeat=ref(null);
let releaseLastYear=ref(null);
onMounted(()=>{
	axios({
		url:'/api/music/analysis',
		method:'GET',
		params:{}
	}).then( response => {
		console.log(response.data);
		const musicTypeData = response.data.music_type;
		const musicRmData = response.data.music_rm;
		total.value=response.data.totalMusicCount[0].totalMusicCount;
		musicrm.value=response.data.totalMusicRm[0].totalMusicRm;
		releaseThisYear.value=response.data.releaseThisYear[0].releaseThisYear;
		releaseLastYear.value=response.data.releaseLastYear[0].releaseLastYear;
		webMusicHeat.value=response.data.webMusicHeat.webMusicHeat;

		
		// 图表绘制
		initMusicTypeCharts(musicTypeData);
		initMusicRmCharts(musicRmData);
	});
});

//-----------------------------  用户类型图表 ---------------------------------
// 清洗用户类型数据
const prepareMusicTypeData = (data)=>{
	let musicTypeData = new Array(5);
	data.forEach( item => {
		if(item.music_type == 1){
			musicTypeData[0] = item.count;
		}else if(item.music_type == 2){
			musicTypeData[1] = item.count;
		}else if(item.music_type == 3){
			musicTypeData[2] = item.count;
		}else if(item.music_type == 5){
			musicTypeData[3] = item.count;
		}else if(item.music_type == 4){
			musicTypeData[4] = item.count;
		}
	});
	return musicTypeData;
}
// 绘制用户类型图表
const initMusicTypeCharts = (musicTypeData)=>{
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('MusicTypeCharts'));
	// 绘制图表
	const option = {
	  title: {
	    // text: 'ECharts 入门示例'
	  },
	  tooltip: {},
	  xAxis: {
	    data: ['华语', '日韩', '欧美','纯音乐','其他']
	  },
	  yAxis: {},
	  series: [
	    {
	      name: '人数',
	      type: 'bar',
	      data: prepareMusicTypeData(musicTypeData)
	    }
	  ]
	}
	myChart.setOption(option);	
}

 //-----------------------------  用户性别图表 ---------------------------------
 // 清洗用户性别数据
const prepareMusicRmData = (data)=>{
	let musicRmData = new Array(2);
	data.forEach( item => {
		if(item.music_rm === '1'){
			musicRmData[0] = {value:item.count,name:'热门'};
		}else if(item.music_rm === '2'){
			musicRmData[1] = {value:item.count,name:'常规'};
		}
	});
	return musicRmData;
}
// 绘制用户性别图表
const initMusicRmCharts = (musicRmData)=>{
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('MusicRmCharts'));
	
	const option = {
	  title: {
		// text: 'Referer of a Website',
		// subtext: 'Fake Data',
		left: 'center'
	  },
	  tooltip: {
		trigger: 'item'
	  },
	  legend: {
		orient: 'vertical',
		left: 'left'
	  },
	  series: [
		{
		  name: 'Access From',
		  type: 'pie',
		  radius: '80%',
		  data:prepareMusicRmData(musicRmData),
		  emphasis: {
			itemStyle: {
			  shadowBlur: 10,
			  shadowOffsetX: 0,
			  shadowColor: 'rgba(0, 0, 0, 0.5)'
			}
		  }
		}
	  ]
	};
	myChart.setOption(option);	
}
</script>

<style scoped>
	.el-row{
		margin-bottom: 10px;
	}
	
	.card-header{
		color: green;
	}
	
	:deep(.my-label) {
	  color: darkgray;
	}
	
	:deep(.my-content) {
	  color: red;
	}
</style>